<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传数据 - 河域分割系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">河域分割系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">仪表板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.my_data') }}">我的数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('data.upload') }}">上传数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('analysis.time_series_analysis') }}">时间分析</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> {{ current_user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人资料</a></li>
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container my-4">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="bi bi-cloud-upload me-2"></i> 上传数据</h4>
                    </div>
                    <div class="card-body">
                        {% with messages = get_flashed_messages() %}
                        {% if messages %}
                        <div class="alert alert-info">
                            {% for message in messages %}
                            {{ message }}
                            {% endfor %}
                        </div>
                        {% endif %}
                        {% endwith %}

                        <form method="post" action="{{ url_for('data.upload') }}" enctype="multipart/form-data" id="uploadForm">
                            <div class="mb-4">
                                <h5 class="mb-3">文件类型</h5>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="file_type" id="fileSatellite" value="satellite" checked>
                                    <label class="form-check-label" for="fileSatellite">卫星影像</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="file_type" id="fileShp" value="shp">
                                    <label class="form-check-label" for="fileShp">SHP文件</label>
                                </div>
                            </div>

                            <div class="mb-4">
                                <h5 class="mb-3">位置信息（可选）</h5>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="latitude" class="form-label">纬度</label>
                                        <input type="number" step="0.000001" class="form-control" id="latitude" name="latitude" placeholder="例如: 39.904200">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="longitude" class="form-label">经度</label>
                                        <input type="number" step="0.000001" class="form-control" id="longitude" name="longitude" placeholder="例如: 116.407396">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="city" class="form-label">城市</label>
                                        <input type="text" class="form-control" id="city" name="city" placeholder="例如: 北京">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <h5 class="mb-3">选择文件</h5>
                                <div class="upload-area" id="uploadArea">
                                    <i class="bi bi-cloud-arrow-up-fill" style="font-size: 3rem; color: #6c757d;"></i>
                                    <p class="mt-3 mb-1">点击或拖拽文件到此处上传</p>
                                    <p class="text-muted small">支持的格式: .tif, .jpg, .png, .shp, .zip</p>
                                    <input type="file" class="form-control visually-hidden" id="file" name="file" accept=".tif,.tiff,.jpg,.jpeg,.png,.shp,.zip">
                                </div>
                            </div>

                            <div id="uploadPreview" class="mb-4 d-none">
                                <h5 class="mb-3">上传预览</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-file-earmark me-3" style="font-size: 2rem;"></i>
                                            <div>
                                                <p class="mb-1" id="fileName">filename.jpg</p>
                                                <p class="mb-0 text-muted small" id="fileSize">1.2 MB</p>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-danger ms-auto" id="removeFile">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg" id="submitBtn" disabled>
                                    <i class="bi bi-upload me-2"></i> 上传文件
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0">上传说明</h5>
                    </div>
                    <div class="card-body">
                        <h6>支持的文件格式:</h6>
                        <ul>
                            <li><strong>卫星影像:</strong> .tif, .tiff, .jpg, .jpeg, .png</li>
                            <li><strong>SHP文件:</strong> .shp (单文件) 或 .zip (包含完整SHP文件集的压缩包)</li>
                        </ul>
                        
                        <h6>注意事项:</h6>
                        <ul>
                            <li>卫星影像建议提供地理位置信息，以便系统进行更准确的分析</li>
                            <li>上传的文件大小限制为100MB</li>
                            <li>对于多波段卫星影像，系统将自动进行处理</li>
                            <li>如上传SHP文件，请确保包含完整的文件集(.shp, .shx, .dbf等)</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>河域分割系统</h5>
                    <p>基于深度学习的河域分割与分析平台</p>
                </div>
                <div class="col-md-3">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('index') }}" class="text-white">首页</a></li>
                        <li><a href="{{ url_for('dashboard') }}" class="text-white">仪表板</a></li>
                        <li><a href="{{ url_for('data.my_data') }}" class="text-white">我的数据</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>账户</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">个人资料</a></li>
                        <li><a href="#" class="text-white">设置</a></li>
                        <li><a href="{{ url_for('auth.logout') }}" class="text-white">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p>&copy; 2023 河域分割系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 文件上传交互
        document.addEventListener('DOMContentLoaded', function() {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('file');
            const uploadPreview = document.getElementById('uploadPreview');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const removeFile = document.getElementById('removeFile');
            const submitBtn = document.getElementById('submitBtn');
            const fileSatellite = document.getElementById('fileSatellite');
            const fileShp = document.getElementById('fileShp');

            // 点击上传区域触发文件选择
            uploadArea.addEventListener('click', function() {
                fileInput.click();
            });

            // 拖拽文件
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.classList.add('border-primary');
            });

            uploadArea.addEventListener('dragleave', function() {
                uploadArea.classList.remove('border-primary');
            });

            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('border-primary');
                
                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    updateFilePreview();
                }
            });

            // 文件选择后更新预览
            fileInput.addEventListener('change', updateFilePreview);

            // 移除文件
            removeFile.addEventListener('click', function() {
                fileInput.value = '';
                uploadPreview.classList.add('d-none');
                submitBtn.disabled = true;
            });

            // 文件类型切换
            fileSatellite.addEventListener('change', updateAcceptedFiles);
            fileShp.addEventListener('change', updateAcceptedFiles);
            
            function updateAcceptedFiles() {
                if (fileSatellite.checked) {
                    fileInput.accept = '.tif,.tiff,.jpg,.jpeg,.png';
                } else {
                    fileInput.accept = '.shp,.zip';
                }
            }

            function updateFilePreview() {
                if (fileInput.files.length) {
                    const file = fileInput.files[0];
                    fileName.textContent = file.name;
                    
                    // 格式化文件大小
                    let size;
                    if (file.size < 1024) {
                        size = file.size + ' bytes';
                    } else if (file.size < 1024 * 1024) {
                        size = (file.size / 1024).toFixed(2) + ' KB';
                    } else {
                        size = (file.size / (1024 * 1024)).toFixed(2) + ' MB';
                    }
                    fileSize.textContent = size;
                    
                    uploadPreview.classList.remove('d-none');
                    submitBtn.disabled = false;
                }
            }
        });
    </script>
</body>
</html> 